<template>
  <el-form :model="form" :ref="'formRef'" label-width="100px">
    <el-form-item label-width="0">
      <el-row align="middle" style="width: 500px;">
        <el-col :span="12">
          <h3>租客待收账单提醒</h3>
        </el-col>
        <el-col :span="12">
          <el-switch
            v-model="form.isPress"
            class=""
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
            @change="handleSwitchChange"
          />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="提醒时间" v-if="form.isPress">
      <el-select v-model="form.alertDayNum" placeholder="请选择">
        <el-option v-for="item in 31" :key="item" :value="item - 1" :label="`提前${item - 1}天`"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="提醒手机号" v-if="form.isPress">
      <template v-for="(item, index) in form.noticePhoneNumberList" :key="index">
        <el-form-item
          :prop="`noticePhoneNumberList[${index}]`"
          :rules="[{ required: true, message: '', trigger: 'blur' }]"
          class="mr20"
          style="margin-bottom: 10px;"
        >
          <div class="flex-row-center">
            <el-input v-model="form.noticePhoneNumberList[index]" placeholder="请输入手机号"></el-input>
            <el-icon class="ml10" color="var(--el-color-error)" @click="handleRemovePhone(index)"><Remove /></el-icon>
          </div>
        </el-form-item>
      </template>
      <el-button v-if="form.noticePhoneNumberList.length < 5" @click="() => form.noticePhoneNumberList.push(null)" class="mb10">+ 添加手机号</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup name="RoomStItem">
import { Check, Close, Remove } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()

const props = defineProps({
  type: String
})

const form = reactive({
  type: '',
  isPress: false,
  alertDayNum: 30,
  noticePhoneNumberList: ['']
})

function submit() {
  return new Promise((resolve, reject) => {
    proxy.$refs['formRef'].validate(valid => {
      if (valid) {
        resolve(form)
      } else {
        reject(valid)
      }
    })
  })
}

function handleSwitchChange(value) {
  if (!value) {
    proxy.resetForm('formRef')
  }
}

defineExpose({
  submit
})
</script>


